<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta charset="UTF-8">
<style>
#header {
    background-color:lightgray;
    color:black;
    text-align:left;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>

<title>数字示波器</title>
</head>
<body>
<div id="header">
<h1 style="margin-left: 400px;">数字示波器</h1>
<a href="/index.html" style="margin-right: 50px;">数字示波器</a>
<a href="/generator.html" style="margin-right: 50px;">波形发生器</a>
<a href="/file.html" style="margin-right: 50px;">文件</a>
<a href="/log.html" style="margin-right: 50px;">维测</a>
<label id="Version">版本:</label>
</div>
<table id="FileTable">
    <tr>
        <th>类型（文件/文件夹）</th>
        <th>文件/文件名</th>
        <th>大小</th>
        <th></th>
    </tr>
</table>
<script>
	function SendHttpRequest(url, callback) {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				if (callback) {
					callback(this.responseText);
				}
				xhttp.abort();
			}
		};
		xhttp.open("GET", url, true);
		xhttp.send();
	}

    function SendFileDefaultCb(responseText) {
         window.location.href="file.html";
    }

    function UploadFile() {
        var total;
        let input = document.getElementById('uploadfile');
        let progress = document.getElementById('progress');

        if (input.files.length === 0) {
            alert('请选择文件');
            return;
        }
        document.getElementById('uploadbtn').setAttribute("disabled", true);
        //SendHttpRequest("/setting.cgi" + "?mkdir=" + fileName.value, SendFileDefaultCb);
        var formData = new FormData();
        formData.append("file", input.files[0]);
        progress.value = 0;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                window.location.href="file.html";
            }
        };
        
        xhr.upload.addEventListener("progress", function(event) {
            if(event.lengthComputable){
                total = event.total;
                progress.value = Math.ceil(event.loaded * 100 / event.total);
            }
        }, false);
        
        xhr.open("POST", "./upload");
        xhr.send(formData);
    }
    
	function SendFileCb(responseText) {
        let table = document.getElementById('FileTable');
        let jsonObject = JSON.parse(responseText).files;

        jsonObject.forEach(item => {
            let row = table.insertRow();
            let cell0 = row.insertCell(0);
            let cell1 = row.insertCell(1);
            let cell2 = row.insertCell(2);
            let cell3 = row.insertCell(3);

            if (item.type == "dir") {
                cell0.textContent = "文件夹";
                
                var linkElement = document.createElement("a");
                linkElement.href = "javascript:void(0)";
                linkElement.target = "_self";
                linkElement.innerText = item.name;
                linkElement.onclick = function () { 
                    SendHttpRequest("/setting.cgi" + "?cd=" + item.name, SendFileDefaultCb);
                };
                cell1.appendChild(linkElement);
            } else {
                cell0.textContent = "文件";

                var linkElement = document.createElement("a");
                linkElement.href = item.name;
                linkElement.target = "_blank";
                linkElement.innerText = item.name;
                cell1.appendChild(linkElement);

                var lable = document.createElement("lable");
                lable.textContent = item.size;
                cell2.appendChild(lable);
            }

            if (item.name != '..' && item.name != '.') {
                var bt = document.createElement("button"); 
                bt.innerHTML = '删除'; 
                bt.onclick = function () { 
                    SendHttpRequest("/setting.cgi" + "?rm=" + item.name, SendFileDefaultCb);
                };
                cell3.appendChild(bt);

                if (item.type == "file") {
                    var btLoad = document.createElement("button"); 
                    btLoad.innerHTML = '加载波形'; 
                    btLoad.onclick = function () { 
                        SendHttpRequest("/setting.cgi" + "?load=" + item.name, SendFileDefaultCb);
                    };
                    cell3.appendChild(btLoad);
                }
            }
        });
        let row = table.insertRow();
        let cell0 = row.insertCell(0);
        let cell1 = row.insertCell(1);
        let cell2 = row.insertCell(2);
        let cell3 = row.insertCell(3);
        var input = document.createElement("input"); 
        input.innerHTML = 'file'; 
        input.id = 'FileName';
        cell1.appendChild(input);

        var btFile = document.createElement("button"); 
        btFile.innerHTML = '新建文件'; 
        btFile.onclick = function () { 
            let fileName = document.getElementById('FileName');
            SendHttpRequest("/setting.cgi" + "?touch=" + fileName.value, SendFileDefaultCb);
        };
        cell3.appendChild(btFile);

        var btDir = document.createElement("button"); 
        btDir.innerHTML = '新建文件夹'; 
        btDir.onclick = function () { 
            let fileName = document.getElementById('FileName');
            SendHttpRequest("/setting.cgi" + "?mkdir=" + fileName.value, SendFileDefaultCb);
        };
        cell3.appendChild(btDir);

        var btSave = document.createElement("button"); 
        btSave.innerHTML = '保存波形'; 
        btSave.onclick = function () { 
            let fileName = document.getElementById('FileName');
            SendHttpRequest("/setting.cgi" + "?save=" + fileName.value, SendFileDefaultCb);
        };
        cell3.appendChild(btSave);

        let row_upload = table.insertRow();
        let cell_upload0 = row_upload.insertCell(0);
        let cell_upload1 = row_upload.insertCell(1);
        let cell_upload2 = row_upload.insertCell(2);
        let cell_upload3 = row_upload.insertCell(3);

        var uploadfile = document.createElement("input");
        uploadfile.type = "file";
        uploadfile.id = "uploadfile";
        cell_upload0.appendChild(uploadfile);

        var progress = document.createElement("progress");
        progress.id = "progress";
        progress.max = "100";
        progress.value = "0";
        cell_upload1.appendChild(progress);

        var uploadbtn = document.createElement("button"); 
        uploadbtn.innerHTML = '上传文件'; 
        uploadbtn.id = "uploadbtn";
        uploadbtn.onclick = UploadFile;
        cell_upload3.appendChild(uploadbtn);
	}
    
	function SendVersionCb(responseText) {
		console.log("version: " + responseText);
		document.getElementById("Version").innerText = "版本: " + responseText;
	}

    window.onload = function() {
        SendHttpRequest("/version.txt", SendVersionCb);
		SendHttpRequest("/files.json", SendFileCb);
    }
</script>
</body>
</html>
